<template>
  <div class="header1">
    <h1>小黑记事本</h1>
    <input v-model="value" type="text" />
    <button @click="add">添加任务</button>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      value: ''
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    //向父组件发送添加的数据
    add () {
      if (this.value === '') {
        return alert('请输入内容')
      } else {
        this.$emit('addlist', {
          id: Date.now(),
          content: this.value
        });
      }
      this.value = ''
    }
  }
}
</script>
<style lang='less'  scoped>
.header1 {
  width: 100%;
  height: 80px;
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
  button {
    margin-left: 15px;
  }
}
</style>
